<template>
  <div>
    <el-upload
      ref="uploadAttachment"
      action="http://upload.qiniup.com"
      :data="uploadData"
      :file-list="preFileList"
      :list-type="listType"
      :before-upload="beforeUpload"
      :on-success="uploadAttachmentSucc"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :multiple="multiple"
      :limit="limit">
      <slot name="inner">
        <el-button size="small" type="primary">点击上传</el-button>
      </slot>
    </el-upload>
    <slot name="outside" v-if="listType === 'picture-card'">
      <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </slot>
  </div>
</template>
<script>
  import {getUpToken} from '../../services/apis/baseService'
  import config from '../../config'

  export default {
    props: {
      fileList: {
        type: Array,
        default: function () {
          return []
        }
      },
      preFiles: {
        type: Array,
        default: function () {
          return []
        }
      },
      limit: {
        default: NaN
      },
      multiple: {
        type: Boolean,
        default: false
      },
      listType: {
        type: String,
        default: 'text'
      }
    },
    data () {
      return {
        uploadData: {},
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    computed: {
      preFileList () {
        let arr = []
        for (let i = 0; i < this.fileList.length; i++) {
          arr.push({
            name: this.fileList[i],
            url: config.QiNiuUrl + this.fileList[i],
            status: 'success',
            key: this.fileList[i]
          })
        }
        return arr
      }
    },
    methods: {
      // 文件上传点击
      updatePreview () {
      },
      // 文件、图片上传前
      beforeUpload (file) {
        return new Promise((resolve, reject) => {
          const suffix = file.name.split('.')
          const ext = suffix.splice(suffix.length - 1, 1)[0]
          getUpToken().then(res => {
            this.uploadData.token = res.data.token
            this.uploadData.key = `${suffix.join('.')}_${new Date().getTime()}.${ext}`
            resolve()
          })
        })
      },
      // 上传成功
      uploadAttachmentSucc (response, file, fileList) {
        this.fileList.push(response.key)
        file.key = response.key
      },
      // 文件上传移除
      updateRemove () {
      },
      // 删除事件
      handleRemove (file, fileList) {
        let targetIndex
        for (let i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i] === file.key) {
            targetIndex = i
          }
        }
        if (targetIndex || targetIndex === 0) {
          this.fileList.splice(targetIndex, 1)
        }
      },
      // 图片预览
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      }
    },
    filters: {},
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
</style>

